<template>
  <div>
    <el-container style="height: 920px; border: 1px solid #eee;margin-top: 0px;">
      <!--左 start-->
      <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="1">
            <i class="el-icon-setting"></i>
            <span slot="title">-工作台</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-setting"></i>
            <span slot="title">-挂号</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-setting"></i>
            <span slot="title">-就开就诊</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">-药品零售</span>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-setting"></i>
            <span slot="title">-收费管理</span>
          </el-menu-item>

          <el-menu-item index="6">
            <i class="el-icon-menu"></i>
            <span slot="title">员工信息管理</span>
          </el-menu-item>
          <el-menu-item index="7" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">患者信息管理</span>
          </el-menu-item>

          <el-submenu index="8">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>药品信息管理</span>
            </template>
            <el-menu-item index="8-1">药品信息维护</el-menu-item>
            <el-menu-item index="8-2">入库管理</el-menu-item>
            <el-menu-item index="8-3">出库管理</el-menu-item>
            <el-menu-item index="8-4">库存管理</el-menu-item>
            <el-menu-item index="8-5">库存盘点</el-menu-item>
            <el-menu-item index="8-6">药品调价</el-menu-item>
          </el-submenu>

          <el-submenu index="9">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>经营概况</span>
            </template>
            <el-menu-item index="9-1">诊所收入趋势</el-menu-item>
            <el-menu-item index="9-2">今日门诊记录</el-menu-item>
          </el-submenu>
          <el-submenu index="10">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>统计报表</span>
            </template>
            <el-menu-item index="10-1">收费统计</el-menu-item>
            <el-menu-item index="10-2">患者统计</el-menu-item>
            <el-menu-item index="10-1">检查项目统计</el-menu-item>
            <el-menu-item index="10-2">药品统计</el-menu-item>
          </el-submenu>
          <el-submenu index="11">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>系统设置</span>
            </template>
            <el-menu-item index="11-1">诊所信息维护</el-menu-item>
            <el-menu-item index="11-2">字典表维护</el-menu-item>
            <el-menu-item index="11-3">检查项目设置</el-menu-item>
            <el-menu-item index="11-4">供应商管理</el-menu-item>
            <el-menu-item index="11-5">模板维护</el-menu-item>
            <el-menu-item index="11-6">费用设置</el-menu-item>
            <el-menu-item index="11-7">基础设置</el-menu-item>
          </el-submenu>



        </el-menu>

      </el-aside>
      <!--左 end-->
      <!--右 start-->
      <el-container>
        <el-header>Header</el-header>

        <el-main>

          <el-row>
            <el-col :span="22" :offset="1">
              <!--卡片shart-->
              <el-card class="box-card" style="">
                <div class="clearfix zhyLineHeight40" style="">
                  <span style="float: left; margin-left: 0px;">应收金额：{{ total }}元</span>
                  <el-button type="info" plain style="float: right;">返回</el-button>
                  <el-button type="info" plain style="float: right;margin-right: 20px">收费</el-button>
                </div>
              </el-card>
              <!--卡片end-->
            </el-col>
          </el-row>
          <el-row style="margin-top: 12px">
            <el-col :span="15" :offset="1">
              <!--卡片shart-->
              <el-card class="box-card" style="">
                <div style="margin:0 10px;">
                  <div class="zhyLineHeight40" style="text-align: left;margin-bottom: 20px;border: 1px solid red;">项目明细</div>

                  <div class="" style="line-height: 40px">
                    <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
                      <el-tab-pane label="1西/成药处方" name="first"><child1></child1></el-tab-pane>
                      <el-tab-pane label="2重要处方" name="second"><child2></child2></el-tab-pane>
                      <el-tab-pane label="3检查项目" name="third"><child3></child3></el-tab-pane>
                    </el-tabs>
                  </div>

                  <div class="zhyLineHeight40" style="text-align: right;border: 2px solid red;">
                    <span>处理费：15.00元</span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <span>注射费：20.00元</span>
                  </div>

                  <hr style="size: ledger"/>
                  <div class="zhyLineHeight40" style="text-align: right;border: 2px solid red;">
                    <span>合计：103.50</span>
                  </div>


                </div>
              </el-card>
              <!--卡片end-->
            </el-col>
            <el-col :span="7">
              <!--卡片shart-->
              <el-card class="box-card" style="">
                <div class="zhyLineHeight40" style="text-align: left;margin-bottom: 20px;border: 1px solid red;">人员信息</div>
                <table class="tableInfo" border="1" cellspacing="0" style="border: 1px solid red;">
                  <tr><td>患者编号：100129</td><td>患者姓名：王宽</td></tr>
                  <tr><td>年龄：15</td><td>性别：女</td></tr>
                  <tr><td>手机：18878909000</td><td>会员等级：VIP3</td></tr>
                  <tr><td>账户余额：2400.00元</td><td>积分：600</td></tr>
                </table>

                <div class="zhyLineHeight40" style="text-align: left;margin-bottom: 20px;border: 1px solid red;margin-top: 20px;">接诊信息</div>
                <table class="tableInfo" border="1" cellspacing="0" style="border: 1px solid red;">
                  <tr><td>门诊编号：201909090001</td></tr>
                  <tr><td>科室：全科</td></tr>
                  <tr><td>接诊医生：林鹤</td></tr>
                  <tr><td>接诊日期：2019-12-11 10:45：12</td></tr>
                  <tr><td>接诊类型：初诊</td></tr>
                </table>
              </el-card>
              <!--卡片end-->
            </el-col>
          </el-row>
        </el-main>

        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
    <!--右 end-->
  </div>
</template>

<script>
  import axios from 'axios';
  import tabZujianChild1 from './chargeDetail';
  export default {
    components:{
      child1:tabZujianChild1,
      child2:tabZujianChild1,
      child3:tabZujianChild1
    },
    data() {
      return {
        /*选项卡*/
        //默认第一个选项卡
        activeName: "first",
      }
    },
    methods: {
      querySubmit() {
        console.log('submit!');
      },
      /*选项卡*/
      tabClick(tab, event) {
        console.log(tab, event);
      }

    },
    mounted(){
    }
  };
</script>

<style scoped>
  .zhyLineHeight40{
    height: 40px;line-height: 40px;
  }
  /*布局容器的样式*/
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  /*卡片的样式*/
  .text {
    /*font-size: 14px;*/
  }

  .item {
    /*margin-bottom: 18px;*/
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    /*width: 1500px;*/
  }
  .el-table .el-table-column{
    height: 30px;
  }
  /*查询框*/
  .el-input {
    width: 360px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  /*表格 个人信息*/
  .tableInfo{
    width: 440px;text-align: left;
  }
  .tableInfo tr{
    height: 40px;line-height: 40px;
  }
  .tableInfo tr td{
    padding-left: 20px;
  }
</style>
